<template>
	<div id="app">
    <div id="smash">
        <!--砸蛋页面-->
        <div class="smash-egg-activity" v-show="!isShowPool">
            <div class="delete-icon right" @click="closePageFun"></div>
            <!--选择每次金额   -->
            <div class="change-money">
                <div class="egg-list" v-for="(item,index) in eggsList" @click="changeEgg(item.id,item.price,item.cover)">
                    <div class="box">
                        <img :src="item.cover" alt="">
                        <div class="num-time" :class="{'num-time-on' : item.id == eggid}">
                            <span v-text="item.price"></span>
                            <span class="dima-icon" v-if="item.currency_id == 2">/次</span>
                            <span v-if="item.currency_id != 2">/次</span>
                        </div>
                        <div v-show="item.id == eggid" class="icon absolute"></div>
                    </div>
                </div>
            </div>
            <!--彩蛋-->
            <div class="click-eggs">
                <!--合蛋-->
                <img class="big-eggs" :src="eggImg" alt="">
                <!--中奖图片-->
                <img v-if="isEggopen == '1'" class="big-eggs-open" :src="eggImgopen" alt="">
                <!--不中奖图片-->
                <img v-if="isEggopen == '2'" class="big-eggs-openno" :src="eggImgopenNo" alt="">
                <!--锤子-->
                <div class="hammer absolute">
                    <img src="../../../assets/img/img06.png" alt="">
                </div>
                <!--发光的-->
                <img v-if="false" class="shine" src="../../../assets/img/img12.png" alt="">
            </div>
            <!--砸蛋赢大奖-->
            <div class="win-award">
                <div style="text-align: center;"><img class="title-big" src="../../../assets/img/img16.png" alt=""></div>
                <p class="win-num">
                    <span v-text="'剩余'+diamonds"></span><span class="dima-icon"></span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <span v-text="eggMoney">200</span><span class="dima-icon">/次</span>
                </p>
                <div class="click-btn">
                    <div class="btn click-one" @click="hammerEgg(1)">砸蛋</div>
                    <div class="btn click-auto" :class="{'btne': isAuto}" @click="hammerEggAuto" v-text="autoText">自动砸蛋</div>
                </div>
                <p class="public-inform">
                    <span class="smash-icon" :class="{' smash-icon-no':!isPublic}" @click="getPublic"></span>
                    <span>抽中奖品公开通知</span>
                    <span class="look-jackpot" @click="showPool()">查看奖池</span>
                </p>
                <!--获得奖品-->
                <div class="get-prize" v-if="prizeList.length > 0">
                    <div style="text-align: center;margin-top: .24rem;">
                        <img class="title-prize" src="../../../assets/img/img13.png" alt="">
                    </div>
                    <div class="prize-list">
                        <div class="list" v-for = "(item,index) in prizeList">
                            <img :src="item.cover" alt="">
                            <p class="text moreDot" v-text="item.title">红包</p>
                            <span class="num" v-text="'×'+item.num">×1</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--查看奖池 要用v-show,防止ios调用的无定义函数报错-->
        <div class="look-pool-box" v-show="isShowPool">
            <div class="look-p-title">
                <span class="back-btn" @click="closePool()"></span>
                <img src="../../../assets/img/img02.png" alt="">
            </div>
            <!--奖品列表-->
            <div class="look-prize-list">
                <!--单个礼物-->
                <div class="l-list" v-for="(item,index) in poolList">
                    <div class="prize-img">
                        <img :src="item.cover" alt="">
                    </div>
                    <div class="prize-text">
                        <h3>获得概率:<span class="" v-text="item.show_chance">21%</span></h3>
                        <p class="prize-t-t moreDot">
                            <span class="prize-name" v-text="item.title">钱包</span>
                            <span>价值:{{ item.price_value }}</span>
                            <span class="dima-icon" v-if="item.type == 'diamond'"></span>
                            <span v-if="item.type == 'money'">元</span>
                        </p>
                    </div>
                    <div class="look-drawed">
                        <p style="color: #6C60F6;">已抽出</p>
                        <h3 v-text="item.total_num">81</h3>
                    </div>
                </div>
            </div>
        </div>
        <!--错误信息-->
        <div class="error-info" v-if="errorinfo">
            <span v-text="errorinfo"></span>
        </div>       
        <!--余额不足弹框-->
        <div v-show="goPay">
            <div class="affirm-pay">
                <p>余额不足，请前往充值</p>
                <div class="btn-box">
                    <div class="btn btn1" @click="colseToPay">返回</div>
                    <div class="btn btn2" @click="noMoney">确定</div>
                </div>
            </div>
            <div class="trans-layer"></div>
        </div>
    </div>
	</div>
</template>
<script>
    import 'assets/css/common.css'
    import './index.css'
    import common from 'assets/js/common';

    export default {
      data() {
        return {
            goPay:false, //前往充值
            errorinfo:'',
            isShowPool:false,
            isPublic: true,  //是否公开
            eggsList:[],  //蛋分类
            prizeList:[],
            poolList:[],
            diamonds:'',
            type:'', //ios还是安卓
            activeId: '', //this.$route.query.id   //2 , //活动ID
            eggMoney:'' ,//选中的钱
            eggImg:'' , //选中的图片
            eggid:'',  //默认选中第一个
            eggImgopen:require('../../../assets/img/openimg2.png'),
            eggImgopenNo:require('../../../assets/img/openimg3.png'),
            isEggopen:'false',
            isAuto:false,
            autoText : '自动砸蛋',
            setTime:'' //存放定时器
        }
      },
      //实例初始化最之前，无法获取到data里的数据
      beforeCreate(){
      	
      },  
      //在挂载开始之前被调用
      beforeMount(){
      
      }, 
      //已成功挂载，相当ready()
      mounted(){
            var _this = this;
            var requestUrl =  this.getRequest();  
            this.type = common.platform.toLowerCase();
            //this.activeId = requestUrl['activeId'];                
            this.activeId = parseInt(common.getQueryString('activeId'));                
            this.goPay = false;
            this.errorinfo = '';
            this.isShowPool = false;
            this.isPublic = true;
            this.eggImgopen = require('../../../assets/img/openimg2.png');
            this.eggImgopenNo = require('../../../assets/img/openimg3.png');
            this.isEggopen = 'false';
            this.isAuto = false;
            clearInterval(this.setTime);
            
            //进来就获取价格

            _this.getMyprizeL();
                             
            //钱不足跳充值
            window['noMoney'] = function(){

                _this.goPay = false;

                if(_this.type == 'ios'){               
                   recharge();
                }
                if(_this.type == 'android'){
                    window.user.recharge();
                }               
            }
 
            //关闭页面
            window['closePageFun'] = function(){
                clearInterval(_this.setTime);
                if(_this.type == 'ios'){               
                   closePage();
                }
                if(_this.type == 'android'){
                    window.user.close();
                }
            }
           
      },
      components:{},
      //相关操作事件
      methods:{
          //跳app充值
          noMoney:function(){
              window.noMoney();
          },
          //app关闭页面
          closePageFun:function(){
              window.closePageFun();
          },
          //获取剩余钻石
          getResiduemonet:function(){
              var _this = this;
              common.ajax({
                  type:'get',
                  url:'/api/user/getuserinfo',
              }).then(res=>{
                  _this.diamonds = res.data.diamonds;
              });

          },
          colseToPay:function(){
              this.goPay = false;
          },
          showError:function(){
              var _this = this;
              setTimeout(function(){
                  _this.errorinfo = '';
              },2000);
          },
          //查看奖池
          showPool:function(){
              this.getPoolinfo(this.activeId,this.eggid);
          },
          //关闭奖池
          closePool:function(){
               this.isShowPool = false;
          },
          getPublic:function(){
              this.isPublic = !this.isPublic;
          },
          changeEgg:function(id,money,img){
              this.eggid = id;
              this.eggMoney = money;
              this.eggImg = img;

              if(this.isEggopen != 'false'){
                  this.isEggopen = 'false';
              }
              if(this.isAuto){
                   this.autoText = '自动砸蛋';
                  clearInterval(this.setTime);
                  this.isAuto = false;
              }
          },
          // 砸一次
          hammerEgg:function(type){
              var _this = this;
             
              //砸蛋一次时候用如果还在自动砸蛋,停止砸蛋
              if(type == 1 && this.isAuto){
                  this.autoText = '自动砸蛋';
                  clearInterval(this.setTime);
                  this.isAuto = false;
                  return                       
              }
              //砸的过程中
              if($('.hammer').hasClass('hammerM') || this.isEggopen != 'false'){
                  return
              }else{                       
                  this.getSmashEgg();
              }
          },
          //多次砸蛋
          hammerEggAuto:function(){
              var _this = this;
              if(this.isAuto){
                  this.autoText = '自动砸蛋';
                  clearInterval(this.setTime);
                  this.isAuto = false;
                  //return
              }else{                       
                  _this.isAuto = true;
                  _this.autoText = '停止砸蛋';
                  //点的时候就砸
                  this.hammerEgg(2);
                  //每两秒又砸
                  this.setTime = setInterval(function(){
                      _this.hammerEgg(2);
                  },2000);
              }
                               
          },
          //砸蛋动画
          smashMove:function(res){
              var _this = this;
              $('.hammer').addClass('hammerM');

              setTimeout(function(){
                  $('.hammer').removeClass('hammerM');

                  _this.isEggopen = 'false';
                  //中奖
                  if(res.length != 0){
                      _this.prizeList.unshift(res);
                  }
              },1700);

              setTimeout(function(){
                  //中奖
                  if(res.length != 0){                            
                      _this.isEggopen = '1';
                  }else{
                      //没中奖
                      _this.isEggopen = '2';
                  }
              },300);
              
          },
          //砸奖接口
          getSmashEgg:function(type){

              var _this = this;
              var isPush = 1;

              if(this.isPublic){
                  isPush = 1;
              }else{
                  isPush = 0;
              }
              
              common.ajax({
                  type:'POST',
                  url:'/api/luck/draw',
                  data:{
                      activityId: _this.activeId,
                      drawId:_this.eggid,
                      money:_this.eggMoney,
                      is_push: isPush 
                  },
              }).then(res=>{
                  //成功过后重新查钱
                  _this.getResiduemonet();
                  _this.smashMove(res.data,type);   

              }).catch(error=>{

                  if(_this.isAuto){
                      _this.autoText = '自动砸蛋';
                      clearInterval(_this.setTime);
                      _this.isAuto = false;
                      //return
                  }
                  //余额不足
                  if(error.data.info == '余额不足'){
                      _this.goPay = true;
                  }
                  //当前价格有变化
                  if(error.data.info == '当前价格有变化'){
                      _this.getpriceList();
                  }

              })
          },
          //奖池列表
          getPoolinfo:function(activeId,eggId){
              var _this = this;

              common.ajax({
                  type:'GET',
                  url:'/api/draw/info?activityId='+activeId+'&drawId='+eggId,
              }).then(res=>{
                  _this.isShowPool = true;
                  _this.poolList = res.data;                  
              });
                 
          },
          //获取每个价格
          getpriceList:function(){
              var _this = this;
              common.ajax({
                  type:'GET',
                  url:'/api/prize/info?activityId='+this.activeId,
              }).then(res=>{

                  _this.eggsList = res.data;
                  _this.eggid = res.data[0].id;
                  _this.eggImg = res.data[0].cover;
                  _this.eggMoney = res.data[0].price;                  
              })
          }, 
         //获取自己获奖记录
          getMyprizeL:function(){
              var _this = this;
              common.ajax({
                  type:'GET',
                  url:'/api/prize/list?activityId='+this.activeId,               
              }).then(res=>{
                  _this.prizeList = res.data;
                  //执行价格
                  _this.getpriceList();
                  _this.getResiduemonet();
              });

          },
          getRequest() {
             var url = location.search; //获取url中"?"符后的字串

             var theRequest = new Object();
             if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                var strs = str.split("&");
                for(var i = 0; i < strs.length; i ++) {
                   theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
                }
             }
             console.log(theRequest);
             return theRequest;
          }              
        }
    }
      

</script>

<style>
</style>
